<template>
    <div>
        <el-upload :action="uploadUrl+'/xzsp/sysAttrFile/upload'" :headers="headers" :show-file-list="false" :on-success="onUploadSuccess">

            <div v-if="!!url" class="r-upload">
                <img :src="url" class="default-img" />
                <div class="upload-mask">
                    <!-- <span @click="onPreview($event)" class="preview-icon">预览</span> -->
                    <!-- <span class="preview-icon delete-icon">替换</span> -->
                    <i @click="onPreview($event)" class="el-icon-zoom-in preview-icon"></i>
                    <i class="el-icon-refresh delete-icon"></i>
                </div>
            </div>
            <div v-if="!url" class="r-upload">
                <img src="../../assets/unifyAcceptWorkbench/add.png" alt="" />
                <span>证件</span>
            </div>
        </el-upload>
        <el-dialog title = "图片预览" :append-to-body="true" :visible.sync="dialogVisible">
            <img class="preview-img" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>

</template>

<script>
import { getCookie, uploadUrl } from "../../utils";
export default {
    /**
     * defaultUrl，默认显示图片地址
     * item
     */
    props: ["defaultUrl", "item"],
    data() {
        let token = getCookie("token");

        return {
            url: this.defaultUrl,
            headers: { token },
            uploadUrl,
            dialogImageUrl:"",
            dialogVisible:false,
        };
    },
    mounted() {},
    methods: {
        onPreview(e) {
            e.cancelBubble = true; //阻止事件冒泡
            this.dialogImageUrl = this.url;
            this.dialogVisible = true;
        },
        handleRemove() {},
        onUploadSuccess(response) {
            let { code, data = {} } = response;
            if (code == 200) {
                this.url = data.uploadPath;
                this.$emit("onSuccess", Object.assign(data, this.item));
            }
        }
    },
    watch: {
        defaultUrl: function(n) {
            this.url = n;
        }
    }
};
</script>

<style lang="scss" scoped>
.r-upload {
    width: 120px;
    height: 78px;
    border-radius: 10px;
    border: solid 1px #d2d2d2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    span {
        font-size: 12px;
        margin-top: 5px;
        line-height: 20px;
    }
    &:hover {
        .upload-mask {
            opacity: 1;
        }
    }
    .upload-mask {
        opacity: 0;
        position: absolute;
        background: rgba(0, 0, 0, 0.3);
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .preview-icon {
        color: #fff;
        font-size: 20px;
        margin-right: 10px;
    }
    .delete-icon {
        font-size: 20px;
        color: #fff;
    }
}
.default-img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.preview-img{
    max-width: 600px;
    width: 100%;
}
</style>